<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--html分块，由div来进行分块-->
<!--div块级元素，自动换行 span 行内元素 -->
<!--如果每一个页面都有上边部分和下边部分，如果客户需要修改电话号码，我们需要对每一个页面进行修改，所以这里需要将公共部分进行提取-->
<div class="home-top">
    <!--    公司信息-->
    <div class="home-top-company">
        <!--        我们需要对公司logo和公司电话进行左右对齐-->
        <div class="company-logo"><img src="" height="141" width="204"/></div>
        <div class="company-phone">
            <div class="phone-img"><img src="../img/icon2_03_uc2a.png" height="30" width="30"/></div>
            <!--            电话号码改成白色，颜色 CSS代码叫color-->
            <div class="phone-zi">
<!--                028-88888888-->
            </div>
        </div>
    </div>
    <!--    导航信息-->
    <div class="home-nav">
        <!--ul是无需列表ol是有序列表,怎么来设置有序列表的前面的数字显示，a,b,c        I II III VI-->
        <!--        ul 无需列表 怎么改变前面符号，方块，空心-->
        <!--        <ul>-->
        <!--            <li>网站首页</li>-->
        <!--            <li>公司介绍</li>-->
        <!--            <li>新闻动态</li>-->
        <!--            <li>产品信息</li>-->
        <!--            <li>在线留言</li>-->
        <!--            <li>联系我们</li>-->
        <!--        </ul>-->
        <div>
            <a href="home.html">
                <div>网站首页</div>
            </a>
            <a href="company.html">
                <div>公司介绍</div>
            </a>
            <a href="news.html">
                <div>新闻动态</div>
            </a>
            <a href="product.html">
                <div>产品信息</div>
            </a>
            <a href="online.html">
                <div>在线留言</div>
            </a>
            <a href="callus.html">
                <div>联系我们</div>
            </a>
        </div>

    </div>
    <!--    广告信息-->
    <div class="home-ad">

<!--        <div class="ad-one">品味生活 · 品味美食</div>-->
<!--        <div>-->
<!--            &lt;!&ndash;            p标签叫做段落&ndash;&gt;-->
<!--            <p>一壶茶 出了生活的醇美</p>-->
<!--            <p>一枝花 开出了生活的鲜艳</p>-->
<!--            <p> 一首诗 吟出了生活的酸辛</p>-->
<!--            <p> 一把火 燃烧出了生活的激情</p>-->
<!--            <p>一枝笔 绘出了人生的五彩缤纷</p>-->
<!--            <p>一首歌 唱出了人生的喜怒哀惧</p>-->
<!--            <p>生活像五味瓶，这么酸、这么甜、这么苦、又这么辣</p>-->

<!--        </div>-->
<!--        &lt;!&ndash;        生活，美食，下面p标签内容的字体，颜色，大小一致，说明我们需要对这三块有一个共同的类名&ndash;&gt;-->
<!--        <div>-->
<!--            &lt;!&ndash;            <p>品味<span class="ad-three-zi">生活</span> 品味<span class="ad-three-zi">美食</span></p>&ndash;&gt;-->
<!--            <p>-->
<!--                <span>品味</span>-->
<!--                <span>生活</span>-->
<!--                <span>品味</span>-->
<!--                <span>美食</span>-->
<!--            </p>-->
<!--            <p class="ad-three-zi ad-three-p">星语餐饮给你生活指南</p>-->
<!--        </div>-->
    </div>
</div>
</body>
</html>